<template>
    <div class="addressPop">
        <van-popup v-model="addressShow" closeable round >
            <div class="editAddress font-size-12-pk">
                <div class="text-center-pk item-content-pk font-size-16-pk">{{title}}</div>
                <div class="d-flex-pk border-bottom-pk-F5">
                    <div>
                        <van-field v-model="userExpress.name" placeholder="收货人姓名"/>
                    </div>
                    <div>
                        <van-field v-model.trim="userExpress.mobile" type="tel" placeholder="联系电话"/>
                    </div>
                </div>
                <div class="chooseAddress border-bottom-pk-F5" @click="handleAreaSelect" >
                    <van-cell v-show="areaStr" center :title="areaStr" is-link :border="false"></van-cell>
                    <van-cell v-show="!areaStr" center title="选择地区" is-link :border="false"></van-cell>
                </div>
                <div>
                    <van-field v-model="userExpress.address" placeholder="详细地址(如街道、小区、乡镇、村)"/>
                </div>
                <pk-button type="danger" block height="30px" :disabled="isValid" @click="saveAddress" >保存</pk-button>
            </div>
        </van-popup>
        <van-popup
                v-model="areaSelectShow"
                position="bottom">
            <area-select @change="areaSelectResult" @cancel="areaSelectResult"></area-select>
        </van-popup>
    </div>
</template>

<script>
    import AreaSelect from "./AreaSelect";
    export default {
        name: "addressPop",
        components: {AreaSelect},

        data() {
            return {
                userExpress : {},
                title: "添加收货地址", //编辑收货地址
                addressShow: false,
                areaSelectShow: false,
                areaStr: "",
            }
        },
        created() {
        },
        computed: {
            isValid() {
                return !(this.userExpress.name && this.userExpress.mobile && this.areaStr && this.userExpress.address)
            }
        },
        methods: {
            addAddress(editType, expressInfo) {
                if(editType === "edit") {
                    this.title = "编辑收货地址";
                    if(typeof expressInfo === "object") {
                        this.userExpress = JSON.parse(JSON.stringify(expressInfo));
                        this.initEdit()
                    }
                }else {
                    this.userExpress = {};
                    this.title = "添加收货地址";
                }
                this.addressShow = true
            },
            initEdit() {
                let userExpress = this.userExpress;
                this.areaStr = `${userExpress.province} ${userExpress.city} ${userExpress.area}`;
            },
            handleAreaSelect() {
                this.areaSelectShow = true
            },
            areaSelectResult(val) {
                if(val) {
                    this.areaStr = `${val[0].name} ${val[1].name} ${val[2].name}`;
                    this.userExpress.provinceId = val[0].code;
                    this.userExpress.province = val[0].name;
                    this.userExpress.cityId = val[1].code;
                    this.userExpress.city = val[1].name;
                    this.userExpress.areaId = val[2].code;
                    this.userExpress.area = val[2].name;

                }
                this.areaSelectShow = false
            },
            saveAddress() {
                this.$api.saveUserExpress(this.userExpress).then( res => {
                    let result = this.$resData(res);
                    if(result) {
                        this.$toast.success("保存成功");
                        this.$emit("change", result);
                        this.addressShow = false
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .addressPop {
        .editAddress {
            width: 80vw;
            box-sizing: border-box;
            padding: 6px 15px 20px;
            .submitBtn {
                padding: 8px;
                border-radius: 4px;
            }
        }
    }
</style>
